import React, { Component } from 'react';
import {
  View,
  Text,
  StyleSheet,
  TouchableOpacity,
} from 'react-native';
import PxToDp from '../../../utils/PxToDp';

class EndCall extends Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0,
    };
  }


  render() {
    return (
      <View style={[styles.bgColor, styles.flex]}>
        <View style={styles.wrapper}>
          <View style={{ width: '100%' }}>
            <View style={styles.titleWrapper}>
              <Text style={styles.title}>结束通话</Text>
            </View>
            <Text style={[styles.content]}>返回后，将结束与该客户的在线通话</Text>
            <Text style={[styles.content, styles.content1]}>确定返回吗？</Text>
          </View>
          <View style={styles.submitWrapper}>
            <TouchableOpacity
              activeOpacity={0.6}
              style={[styles.button, styles.cancel]}
              onPress={() => this.props.Cancle()}
            >
              <Text style={styles.cancelText}>取消</Text>
            </TouchableOpacity>
            <TouchableOpacity
              activeOpacity={0.6}
              style={[styles.button, styles.submit]}
              onPress={() => this.props.Confirm()}
            >
              <Text style={styles.submitText}>确定</Text>
            </TouchableOpacity>
          </View>
        </View>
      </View>
    );
  }
 }

const styles = StyleSheet.create({
  bgColor: {
    backgroundColor: 'transparent',
    alignItems: 'center',
    justifyContent: 'center',
  },
  flex: {
    flex: 1,
  },
  wrapper: {
    justifyContent: 'space-between',
    alignItems: 'center',
    width: PxToDp(320),
    height: PxToDp(280),
    paddingTop: PxToDp(26),
    backgroundColor: '#fff',
    borderColor: '#f15556',
    borderTopWidth: PxToDp(3),
    borderRadius: PxToDp(2),
  },
  titleWrapper: {
    alignItems: 'center',
    width: '100%',
    paddingBottom: PxToDp(12),
    marginBottom: PxToDp(20),
  },
  title: {
    color: '#333',
    fontSize: PxToDp(20),
  },
  content: {
    marginTop: PxToDp(14),
    paddingLeft: PxToDp(10),
    paddingRight: PxToDp(10),
    color: '#333',
    fontSize: PxToDp(16),
    textAlign: 'center',
  },
  content1: {
    marginTop: PxToDp(6),
    paddingLeft: PxToDp(100),
    paddingRight: PxToDp(100),
  },
  submitWrapper: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    marginBottom: 0,
    height: PxToDp(50),
  },
  button: {
    justifyContent: 'center',
    alignItems: 'center',
    width: PxToDp(160),
    height: PxToDp(50),
    borderStyle: 'solid',
    borderColor: '#ddd',
    borderTopWidth: PxToDp(1),
  },
  cancel: {
    marginLeft: 0,
    borderRightWidth: PxToDp(1),
  },
  cancelText: {
    color: '#999',
    fontSize: PxToDp(18),
  },
  submit: {
    marginRight: 0,
  },
  submitText: {
    color: '#f65252',
    fontSize: PxToDp(18),
    fontWeight: 'bold',
  },
});

export default EndCall;
